import React, { Suspense } from 'react'
import Loading from '../components/loading'
import { Outlet } from 'react-router-dom'
import { useRoutes } from 'react-router-dom'

import { routes } from './routes'

type EleItem = {
  index?: boolean
  path?: string
  element: React.ReactElement
}

const RouteChildren: EleItem[] = routes.map((v, i) => {
  const ele: EleItem = {
    element: <Suspense fallback={<Loading />}>{v.element}</Suspense>,
  }
  if (v.index) {
    ele.index = v.index
  } else {
    ele.path = v.path
  }
  return ele
})

const Router = () =>
  useRoutes([
    {
      path: '/',
      element: <Outlet />,
      children: RouteChildren,
    },
  ])

export default Router
